<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI角色语音聊天</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🎭 AI角色语音聊天</h1>
            <p>与你喜欢的角色进行实时语音对话</p>
        </header>

        <div class="character-selection" id="characterSelection">
            <h2>选择聊天角色</h2>
            <div class="character-grid" id="characterGrid">
                <!-- 角色卡片将通过JavaScript动态加载 -->
            </div>
        </div>

        <div class="chat-container" id="chatContainer" style="display: none;">
            <div class="chat-header">
                <div class="character-info">
                    <img id="characterAvatar" src="" alt="角色头像">
                    <div>
                        <h3 id="characterName"></h3>
                        <p id="characterDesc"></p>
                    </div>
                </div>
                <button class="back-btn" onclick="showCharacterSelection()">返回选择</button>
            </div>

            <div class="chat-messages" id="chatMessages">
                <div class="welcome-message">
                    <p>👋 你好！我是 <span id="welcomeCharacterName"></span>，很高兴与你对话！</p>
                </div>
            </div>

            <div class="chat-input-container">
                <div class="input-controls">
                    <button class="voice-btn" id="voiceBtn" title="点击录音">
                        <span class="voice-icon">🎤</span>
                        <span class="voice-text">点击录音</span>
                    </button>

                    <div class="text-input-group">
                        <input type="text" id="textInput" placeholder="输入文字消息..." maxlength="500">
                        <button id="sendTextBtn" title="发送文字">📤</button>
                    </div>
                </div>

                <div class="audio-controls">
                    <audio id="audioPlayer" controls style="display: none;"></audio>
                    <button id="playResponseBtn" style="display: none;" title="播放AI语音回复">🔊 播放回复</button>
                </div>
            </div>

            <div class="recording-indicator" id="recordingIndicator" style="display: none;">
                <div class="pulse"></div>
                <span>正在录音...</span>
            </div>
        </div>

        <div class="loading" id="loading" style="display: none;">
            <div class="spinner"></div>
            <p>处理中...</p>
        </div>
    </div>

    <script src="/js/app.js"></script>
</body>
</html>